<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<title>角色主页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<%@ include file="/WEB-INF/common.jsp"%>

<link
	href="${path }/resources/css/plugins/bootstrap-table/bootstrap-table.min.css"
	rel="stylesheet">
<link href="${path }/resources/css/animate.css" rel="stylesheet">
<link href="${path }/resources/css/style.css?v=4.1.0" rel="stylesheet">

<!--dataTables css样式-->
<link rel="stylesheet" type="text/css"
	href="${path }/resources/css/jquery.dataTables.min.css">
<!--DataTables button扩展-->
<link rel="stylesheet" type="text/css"
	href="${path }/resources/css/buttons.dataTables.min.css">
<!-- Bootstrap -->
<link href="${path }/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap-daterangepicker -->
<link href="${path }/resources/css/daterangepicker.css" rel="stylesheet">

</head>
<body class="gray-bg" style="">
<jsp:include page="/WEB-INF/loginCheck.jsp" />
	<div>
		<h1 style="margin-left: 20px">监控维保人员位置</h1>
	</div>
	<hr>
	<!--查询条件  -->
	<div id="selectbar" style="margin-top: 30px">
		<form class="form-horizontal" action="${path }/location/searchLocation.htm" method="post">
			<div class="col-md-2">

				<fieldset>
					<div class="control-group">
						<div class="controls">
							<div class="input-prepend input-group">
								<span class="add-on input-group-addon"><i
									class="fa fa-calendar"></i></span> <input type="text"
									style="width: 200px" name="reservation" id="reservation"
									class="form-control form_datetime"
									value="01/01/2016-01/25/2016" />
							</div>
						</div>
					</div>
				</fieldset>

			</div>
			<div class="btn-group" style="margin-left: 80px">
				<select class="form-control" name="peopleName">
						<option value="-1">选择人员姓名</option>
						<c:forEach items="${nameList}" var="n">
							<option value="${n.name}">${n.name}</option>
						</c:forEach>

					</select>
			</div>
			<div class="btn-group" style="margin-left: 30px">
				<select class="form-control" name="projectName">
						<option value="-1">选择项目名称</option>
						<c:forEach items="${projectList}" var="n">
							<option value="${n.id}">${n.projectName}</option>
						</c:forEach>

					</select>
			</div>
			<div class="btn-group">
				<button id="submit" class="btn btn-default " type="submit"
					aria-expanded="false">查询</button>
			</div>
		</form>
	</div>

	<!--表格  -->
	<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 30px">
		<table id="positionList" class="table table-bordered table-striped" style="width:100%">
			<thead>
				<tr>
					<th>人员姓名</th>
					<th>维保企业</th>
					<th>到岗项目</th>
					<th>距离目的地距离（米）</th>
					<th>记录时间</th>
					<th>是否到岗</th>
				</tr>
			</thead>
		</table>
	</div>


	<!-- Peity-->
	<script src="${path }/resources/js/plugins/peity/jquery.peity.min.js"></script>
	<!-- Bootstrap-->
	<script src="${path }/resources/js/bootstrap.min.js"></script>

	<!-- Bootstrap table-->
	<script
		src="${path }/resources/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
	<script
		src="${path }/resources/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

	<!-- 自定义js-->
	<script src="${path }/resources/js/content.js?v=1.0.0"></script>

	<!-- jQuery Validation plugin javascript-->
	<script
		src="${path }/resources/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${path }/resources/js/plugins/validate/messages_zh.min.js"></script>

	<!-- jQuery form  -->
	<script src="${path }/resources/js/jquery.form.min.js"></script>

	<!-- layer javascript -->
	<script src="${path }/resources/js/plugins/layer/layer.min.js"></script>

	<!--DataTables 核心 js-->
	<script src="${path }/resources/js/jquery.dataTables.min.js"></script>
	<!--DataTables button扩展-->
	<script src="${path }/resources/js/dataTables.buttons.min.js"></script>
	<!--DataTables 导出相关js文件-->
	<script src="${path }/resources/js/buttons.html5.min.js"></script>
	<script src="${path }/resources/js/jszip.min.js"></script>
	<!-- 省市联动 -->
	<script src="${path }/resources/js/distpicker.data.js"></script>
	<script src="${path }/resources/js/distpicker.js"></script>
	<script src="${path }/resources/js/main.js"></script>
	<!-- datatables日期格式化 -->
	<script src="${path }/resources/js/moment.min.js"></script>
	<!-- bootstrap-daterangepicker -->
	<script src="${path }/resources/js/daterangepicker.js"></script>

	<script type="text/javascript">
		var data = ${locatonList};
		//然后 DataTables 这样初始化：
		$('#positionList').DataTable({
			data : data,
			language : {
				"paginate" : {
					"processing" : "正在处理中。。。"
				},
				//"sProcessing": "处理中...",  
				"sLengthMenu" : "显示 _MENU_ 项结果",
				"sZeroRecords" : "没有匹配结果",
				"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
				"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
				"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
				"sInfoPostFix" : "",
				"sSearch" : "搜索:",
				"sUrl" : "",
				"sEmptyTable" : "暂无当天签到数据",
				"sLoadingRecords" : "载入中...",
				"sInfoThousands" : ",",
				"oPaginate" : {
					"sFirst" : "首页",
					"sPrevious" : "上页",
					"sNext" : "下页",
					"sLast" : "末页"
				},
				"oAria" : {
					"sSortAscending" : ": 以升序排列此列",
					"sSortDescending" : ": 以降序排列此列"
				}
			},
			"iDisplayLength" : 15,
			"lengthMenu" : [ 10, 15, 20 ],
			"columns" : [{
				"data" : "name",
				"defaultContent" : ""
			}, {
				"data" : "enterpriseName",
				"defaultContent" : ""
			}, {
				"data" : "maintenanceProject",
				"defaultContent" : ""
			}, {
				"data" : "distance",
				"defaultContent" : ""
			}, {
				"data" : "time",
				"defaultContent" : "",
				 "render": function (data, type, row, meta) {
          		  		return moment(data).format("YYYY/MM/DD HH:mm:ss");
				 }
			}, {
				"data" : "signStatus",
				"defaultContent" : "",
				"render": function (data, type, row, meta) {
      		  		if(data==1){
      		  			return  "是";
      		  		}else{
      		  			return  "否";
      		  		}
			 }
			} ]

		});
		$('#reservation').daterangepicker();
	</script>

</body>
</html>